<template>
    <div class="appointment-edit-service">
        <div class="header-box">
            <div class="header-left">
                <div class="back">
                    <i class="el-icon-arrow-left" @click="backFun"></i>
                </div>
                <div class="title">编辑排班</div>
            </div>
        </div>
        <div class="scheduling-info comm-list">
            <div class="select-content">
                <div class="select-content-title">
                    <div class="title"><span>服务人</span></div>
                </div>
                <div class="content-box">
                    <div class="content-row">
                        <div class="content-info-box">
                            <div class="info">
                                <div class="img-box">
                                    <img
                                        :src="
                                            staffData.avatar
                                                ? staffData.avatar
                                                : img_buf
                                        "
                                        alt=""
                                    />
                                </div>
                                <div class="content-info">
                                    <div class="content-title">
                                        <span>{{
                                            staffData.name || staffData.title
                                        }}</span>
                                        <span
                                            class="tag"
                                            v-if="staffData.position_title"
                                            >{{
                                                staffData.position_title
                                            }}</span
                                        >
                                    </div>
                                    <div class="content-phone">
                                        <span>{{ staffData.cellphone }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="select-content">
                <div class="select-content-title">
                    <div class="title"><span>选择日期</span></div>
                    <div class="but">
                        <div class="tis">
                            <span class="tis-2">未排班</span>
                            <span class="tis-3">已排班</span>
                        </div>
                        <el-button
                            size="mini"
                            @click="batchFun"
                            class="button-but"
                            >{{
                                is_batch ? "切换单选操作" : "切换批量操作"
                            }}</el-button
                        >
                    </div>
                </div>
                <div class="date-box">
                    <div
                        class="date-row"
                        v-for="(item, index) in timestrList"
                        :key="index"
                        :class="[
                            item.is_acitve ? 'avitve' : '',
                            item.hour_book || item.hour_selected
                                ? 'timestr-avitve'
                                : '',
                        ]"
                        @click="cheTimestr(item)"
                    >
                        <div class="date-txt">{{ item.timestr_week }}</div>
                        <div class="date">{{ item.timestr_day }}</div>
                    </div>
                </div>
            </div>
            <div class="select-content">
                <div class="select-content-title">
                    <div class="title"><span>选择时间</span></div>
                    <div class="but">
                        <div class="tis">
                            <span class="tis-1">已预约</span>
                            <span class="tis-2">未排班</span>
                            <span class="tis-3">已排班</span>
                        </div>
                    </div>
                </div>
                <div class="date-box">
                    <div
                        class="date-row tiem"
                        v-for="(item, index) in hourList"
                        :key="index"
                        :class="[
                            item.is_acitve ? 'yas-avitve' : '',
                            !item.is_no_acitve ? 'no-avitve' : '',
                            !item.is_make_acitve ? 'make-avitve' : '',
                        ]"
                        @click="cheHour(item, index)"
                    >
                        <div class="date">{{ item.hour_time }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="but-box">
            <div class="but avt" @click="submitScheduling">
                <span>提交排班</span>
            </div>
        </div>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import config from "@/js/conf/Config.js";

export default {
    name: "",
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            staffData: {}, //服务人数据
            timestrList: [], //日期数据
            hourList: [], //时间数据
            is_batch: false, //是否批量
            selectIndex: [],
            is_hour_book: false, //选中的日期是否有预约
        };
    },
    methods: {
        initData(data) {
            this.staffData = data;
            console.log(data);
            this.getDutyInfo();
        },
        // 选择日期
        cheTimestr(item) {
            this.is_hour_book = false;
            if (item.hour_book) {
                this.is_hour_book = true;
            }
            if (item.hour_book && this.is_batch) {
                this.$msg({
                    title: `${item.timestr_day}已有预约，不支持批量编辑`,
                });
                return;
            }
            this.timestrList.map((v) => {
                if (this.is_batch) {
                    if (v.timestr == item.timestr) {
                        v.is_acitve = !v.is_acitve;
                    }
                } else {
                    if (v.timestr == item.timestr) {
                        v.is_acitve = true;
                    } else {
                        v.is_acitve = false;
                    }
                }
            });
            if (!this.is_batch) {
                this.formatTiemStatus();
                this.hourList.map((v, i) => {
                    if (item.hour_book) {
                        item.hour_book.map((vs) => {
                            if (vs == v.hour) {
                                v.is_make_acitve = false;
                                if (this.selectIndex.length == 0) {
                                    this.selectIndex = [i];
                                }
                            }
                        });
                    }
                    if (item.hour_selected) {
                        item.hour_selected.map((vs) => {
                            if (vs == v.hour) {
                                v.is_no_acitve = false;
                            }
                        });
                    }
                });
            }
        },
        // 选择时间
        cheHour(item, index) {
            let index_1 = "";
            let index_2 = "";
            this.selectIndex.push(index);
            this.hourList.map((v) => {
                if (!v.is_make_acitve) {
                    v.is_acitve = true;
                }
            });
            if (this.selectIndex.length == 2) {
                index_1 = this.selectIndex[0];
                index_2 = index;
                if (index_1 < index_2) {
                    this.hourList.map((v, i) => {
                        if (i >= index_1 && i <= index_2) {
                            v.is_acitve = true;
                        } else {
                            if (v.is_make_acitve) {
                                v.is_acitve = false;
                            }
                        }
                    });
                } else {
                    this.hourList.map((v, i) => {
                        if (i <= index_1 && i >= index_2) {
                            v.is_acitve = true;
                        } else {
                            if (v.is_make_acitve) {
                                v.is_acitve = false;
                            }
                        }
                    });
                }
                if (!this.is_hour_book) {
                    this.selectIndex = [index_2];
                } else {
                    this.selectIndex = [this.selectIndex[0]];
                }
            } else {
                index_1 = index;
                this.hourList.map((v, i) => {
                    if (i == index_1) {
                        v.is_acitve = true;
                    }
                });
            }
        },
        // 切换批量操作
        batchFun() {
            this.$confirm(
                `是否要切换${this.is_batch ? "单选操作" : "批量操作"}`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            )
                .then(() => {
                    this.is_batch = !this.is_batch;
                    this.selectIndex = [];
                    this.timestrList.map((v) => {
                        v.is_acitve = false;
                    });
                    this.formatTiemStatus();
                })
                .catch(() => {});
        },
        // 获取编辑详情
        async getDutyInfo() {
            let param = {
                staffid: this.staffData.id,
            };
            let url = config.YY_YUYUE_DUTY_EDIT_INFO;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                res.data.timestr_ls.map((v) => {
                    v.is_acitve = false;
                });
                this.timestrList = res.data.timestr_ls || [];

                res.data.hour_ls.map((v) => {
                    v.is_acitve = false;
                    v.is_no_acitve = true;
                    v.is_make_acitve = true;
                });
                this.hourList = res.data.hour_ls || [];
            }
        },
        // 格式时间的选择状态
        formatTiemStatus() {
            this.hourList.map((v) => {
                v.is_acitve = false;
                v.is_no_acitve = true;
                v.is_make_acitve = true;
            });
            this.selectIndex = [];
        },
        // 提交
        async submitScheduling() {
            let param = {
                day_time: this.getDayTime(),
                staffids: [this.staffData.id],
            };
            let url = config.YY_YUYUE_DUTY_SAVE;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.$msg({ title: "提交成功" });
                this.backFun();
            }
        },
        getDayTime() {
            let data = this.hourList;
            let timestr = this.timestrList;
            let day_time = [];
            if (timestr.length == 0) {
                this.$msg({ title: "请选择日期" });
                return;
            }
            if (data.length == 0) {
                this.$msg({ title: "请选择时间" });
                return;
            }
            timestr.map((v) => {
                if (v.is_acitve) {
                    day_time.push({
                        hour: [],
                        timestr: v.timestr,
                    });
                }
            });

            data.map((v) => {
                if (v.is_acitve) {
                    day_time.map((vs) => {
                        vs.hour.push(v.hour);
                    });
                }
            });

            return day_time;
        },
        // 返回
        backFun() {
            this.$emit("backFun");
        },
    },
};
</script>
<style lang="scss" scoped>
.appointment-edit-service {
    height: 100vh;
    margin-left:0;
    width: 100%;
    background-color: #fff;
    position: relative;
    .scheduling-info {
        height: calc(100% - 130px);
        padding: 10px;
        overflow: auto;
    }
    .header-box {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px #e8dcdc solid;
        padding: 0 10px;
        padding-right: 20px;
        display: flex;
        .header-left {
            display: flex;
            .back {
                font-size: 20px;
                margin-right: 10px;
                cursor: pointer;
            }
            .title {
                font-size: 18px;
            }
        }
    }
    .but-box {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 60px;
        width: 100%;
        border-top: 1px #e8dcdc solid;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .but {
            height: 100%;
            padding: 0 20px;
            font-size: 16px;
            display: flex;
            align-items: center;
            cursor: pointer;
            &.avt {
                background: #3388ff;
                color: #fff;
                &:hover {
                    background: #5498f7;
                }
            }
        }
    }

    .select-content {
        border: 1px #e8dcdc solid;
        margin-bottom: 20px;
        .select-content-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            height: 30px;
            .title {
                font-size: 14px;
                font-weight: bold;
            }
            .but {
                display: flex;
                .button-but {
                    margin-left: 10px;
                }
                .tis {
                    text-align: right;
                    display: flex;

                    span {
                        display: flex;
                        align-items: center;
                        margin-left: 10px;
                    }
                    .tis-1 {
                        &::before {
                            content: " ";
                            display: inline-block;
                            width: 10px;
                            height: 10px;
                            border: 1px #3989fc solid;
                            background: #e6e6e6;
                            margin-right: 10px;
                        }
                    }
                    .tis-2 {
                        &::before {
                            content: " ";
                            display: inline-block;
                            width: 10px;
                            height: 10px;
                            border: 1px #333333 solid;
                            margin-right: 10px;
                        }
                    }
                    .tis-3 {
                        &::before {
                            content: " ";
                            display: inline-block;
                            width: 12px;
                            height: 12px;
                            background: #e6e6e6;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }

        .content-box {
            border-top: 1px #e8dcdc solid;
            padding: 10px 0;
            font-size: 14px;
            .content-row {
                padding: 0 10px;
                border-bottom: 1px #e8dcdc solid;
                margin-bottom: 10px;
                padding-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 0;
                    border: none;
                }
                .content-info-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .info {
                        display: flex;
                        align-items: center;
                    }
                    .img-box {
                        width: 80px;
                        height: 80px;
                        margin-right: 10px;
                        border-radius: 5px;
                        overflow: hidden;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .content-info {
                        .content-title {
                            span {
                                margin-right: 10px;
                            }
                            .tag {
                                font-size: 12px;
                                padding: 0 3px 2px;
                                border: 1px #ff7b23 solid;
                                color: #ff7b23;
                                border-radius: 3px;
                            }
                        }
                        .content-dot {
                            span {
                                font-size: 12px;
                                color: #949494;
                                margin-right: 20px;
                            }
                        }
                    }
                }

                .content-but {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;
                    .content-num {
                        span {
                            margin-right: 10px;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        .date-box {
            display: flex;
            flex-wrap: wrap;
            border-top: 1px #e8dcdc solid;
            padding: 10px;
            .date-row {
                margin-right: 10px;
                margin-bottom: 10px;
                width: 80px;
                border: 1px #555555 solid;
                border-radius: 5px;
                color: #555555;
                padding: 5px 0;
                cursor: pointer;
                .date-txt {
                    text-align: center;
                }
                .date {
                    text-align: center;
                }
                &.tiem {
                    padding: 5px;
                }
                &.timestr-avitve {
                    border: none;
                    background: #e6e6e6;
                    width: 82px;

                    &:hover {
                        background: #e6e6e6;
                    }
                }
                &.avitve {
                    border: none;
                    background: #3388ff;
                    color: #fff;
                    width: 82px;

                    &:hover {
                        background: #3388ff;
                    }
                }

                &.no-avitve {
                    border: none;
                    background: #e6e6e6;
                    padding: 6px;
                    &:hover {
                        background: #e6e6e6;
                    }
                }
                &.make-avitve {
                    background: #e6e6e6;
                    padding: 5px;
                    border: 1px #3e8af9 solid;
                    &:hover {
                        background: #e6e6e6;
                    }
                }
                &.yas-avitve {
                    border: none;
                    background: #3388ff;
                    color: #fff;
                    padding: 6px;
                    &:hover {
                        background: #3388ff;
                    }
                }
                &:hover {
                    background: #f1f1f1;
                }
            }
        }
    }
}
</style>